<template>
    <div class="dept-list">
            <!-- 页面标题 -->
            <div class="header-title">组织管理</div>

            <div style="margin-bottom: 16px">

            </div>

            <el-table :data="DeptInfo" border stripe style="width: 100%">
                
            </el-table>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { GetDept } from "@/Api/dept";
import moment from "moment";

//查询条件信息
const search = reactive({
    DepartmentName: "",
});

//分页条件信息
const Pageinfo = reactive({
    pageIndex: 1,
    pageSize: 10,
    totalCount: 0,
    pageCount: 0,
});

//部门信息
const DeptInfo = ref([]);

//获取部门信息
const GetDeptInfo = async () => {
    var params = {
        DepartmentName: search.DepartmentName,
        pageIndex: Pageinfo.pageIndex,
        pageSize: Pageinfo.pageSize,
    };

    const response = await GetDept(params);
    console.log(response);
    DeptInfo.value = response.data.data.pageData
    Pageinfo.totalCount = response.data.data.totalCount
    Pageinfo.pageCount = response.data.data.pageCount
};

onMounted(() => {
    GetDeptInfo();
});
</script>

<style scoped>
.dept-list {
    background: #fff;
    padding: 2% 3%;
    border-radius: 0.5em;
}

.header-title {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 2%;
}

.status-dot {
    display: flex;
    align-items: center;
    font-size: 15px;
}

.status-dot .dot {
    width: 8px;
    height: 8px;
    background: #13ce66;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.status-dot .dot2 {
    width: 8px;
    height: 8px;
    background: red;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
</style>
